<template>
	<view class="pagesBox">
		<view class="pagesMain">
			<view class="jifenBox">
				<view class="jifenTop">
					<view class="jifenTitle">总营业额</view>
					<view class="jifenNum">{{turnoverInfo.all}}</view>
				</view>
				<!-- <view class="lineBox"></view> -->
				<view class="jifenBottom">
					<view class="jifenItem">
						<view class="itemBg" style="border-radius: 0 0 16rpx 0;"></view>
						<view class="jifenNum">{{turnoverInfo.last_month}}</view>
						<view class="jifenTitle">上月营业额</view>
					</view>
					<view class="jifenItem" style="background-color: #fff;color: #2BA777;border-radius: 16rpx 16rpx 0 0;">
						<view class="jifenNum">{{sumNum(turnoverInfo.month_unsettle,turnoverInfo.money_settle)}}</view>
						<view class="jifenTitle">本月营业额</view>
					</view>
					<view class="jifenItem">
						<view class="itemBg" style="border-radius: 0 0 0 16rpx;"></view>
						<view class="jifenNum">{{turnoverInfo.today}}</view>
						<view class="jifenTitle">今日营业额</view>
					</view>
				</view>
			</view>
			<view class="jifenBox jifenBox2">
				<view class="jifenBottom">
					<view class="jifenItem">
						<view class="jifenNum">{{turnoverInfo.month_unsettle}}</view>
						<view class="jifenTitle">未结算</view>
					</view>
					<view class="jifenItem">
						<view class="jifenNum">{{turnoverInfo.money_settle}}</view>
						<view class="jifenTitle">已结算</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				turnoverInfo:{}
			};
		},
		onLoad(options) {
			this.getTurnover()
		},
		methods:{
			async getTurnover(){
				let res = await uni.$http('POST','score/myTurnover');
				console.log("营业额信息",res);
				if(res.code == 1){
					this.turnoverInfo = res.data;
				}else if(res.msg.includes('登录')){
					uni.setStorageSync('token',0);
				}
			},
			// 两数之和
			sumNum(num1,num2){
				return parseFloat(num1*1 + num2*1).toFixed(2)
			},
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	.pagesMain{
		.jifenBox{
			height: 320rpx;
			color: #fff;
			background-color: #2BA777;
			padding-top: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.jifenTop{
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.jifenTitle{
					font-size: 24rpx;
					letter-spacing: 2rpx;
				}
				.jifenNum{
					font-size: 60rpx;
					margin-top: 6rpx;
				}
			}
			.lineBox{
				width: 60rpx;
				height: 2rpx;
				background-color: #fff;
			}
			.jifenBottom{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.jifenItem{
					width: 32%;
					background-color: #fff;
					padding: 24rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					.itemBg{
						background-color: #2BA777;
						position: absolute;
						top: 0%;
						left: 0%;
						right: 0%;
						bottom: 0%;
						&:first-of-type{
							border-radius: 0 0 16rpx 0;
						}
					}
					.jifenTitle{
						font-size: 20rpx;
						margin-top: 6rpx;
						letter-spacing: 2rpx;
						position: relative;
					}
					.jifenNum{
						font-size: 42rpx;
						position: relative;
					}
				}
			}
		}
		.jifenBox2{
			height: 180rpx;
			color: #2BA777;
			background-color: #fff;
			border-radius: 0 0 16rpx 16rpx;
			margin: 0% 48rpx;
			box-shadow: 0rpx 0rpx 6rpx #ccc;
			justify-content: center;
		}
	}
}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>
